<!--
 * @Author: gyc
 * @Date: 2020-05-21 10:07:56
 * @LastEditTime: 2020-08-06 15:02:11
 * @Description: Nuxt测试版
--> 
<template>
  <div class="user-avatar">
    <div class="user-title">更换头像</div>
    <img :src="img" class="user-avatar-img" />
    <Upload
      action="#"
      :on-success="uploadImg"
      :before-upload="getUrl"
      ref="upload"
      :show-upload-list="false"
      disabled
    >
      <Button icon="ios-cloud-upload-outline" class="user-avatar-btn">上传头像</Button>
    </Upload>
    <div class="userinfo-btn">
      <!--<button>保存</button>-->
      <button-sao :type="2" msg="保存"></button-sao>
    </div>
  </div>
</template>

<script>
import buttonSao from "@/components/button/button_sao";
export default {
  name: "userAvatar",
  data() {
    return {
      img: "/img/avatar.jpg",
    };
  },
  methods: {
    getUrl(e) {
      this.img = e;
      console.log(e);
    },
    uploadImg(response, file, fileList) {
      this.$refs.upload.clearFiles();
      // console.log(file);
      // this.img = file;
    },
  },
  components: {
    "button-sao": buttonSao,
  },
};
</script>

<style lang="scss" scoped>
.user-avatar {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  // padding: 10px;
  background-color: white;
  align-items: flex-start;
  box-shadow: 0px 0px 20px #eee;
  .user-title {
    display: flex;
    position: relative;
    width: 100%;
    padding-left: 20px;
    justify-content: flex-start;
    height: 45px;
    align-items: center;
    font-size: 18px;
    // border-bottom: 1px solid #eee;
    &::before {
      position: absolute;
      content: "";
      width: 4px;
      height: 18px;
      background-color: $gcolor;
      left: 10px;
      top: 12.4px;
      border-radius: 2px;
    }
  }
  .user-avatar-img {
    width: 120px;
    height: 120px;
    margin-top: 20px;
    margin-left: 20px;
  }
  .user-avatar-btn {
    width: 120px;
    height: 35px;
    margin-top: 20px;
    margin-left: 20px;
  }

  .userinfo-btn {
    display: flex;
    width: 100%;
    height: auto;
    padding-top: 20px;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    // border-top: 1px solid #eee;
    button {
      width: 80px;
      height: 35px;
      outline: none;
      border: 0;
      background-color: $gcolor;
      color: white;
      cursor: pointer;
      transition: all 0.4s ease-in-out;
      &:hover {
        box-shadow: 0px 0px 4px $gcolor;
      }
    }
  }
}
</style>